<template>
  <Layout>
    <LayoutPanel region="north" style="height:50px">
      <router-link to="/hello">Hello</router-link>
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/func1">func1</router-link>
    </LayoutPanel>
    <LayoutPanel region="south" :split="true" style="height:50px">下</LayoutPanel>
    <LayoutPanel region="east" title="East" :split="true" style="width:180px">

    </LayoutPanel>

    <LayoutPanel region="west" title="West 左" style="width:150px;" :split="true" bodyCls="f-column">
      <Accordion :border="false" collapsible="true">
        <AccordionPanel title="Title1">
          <Tree :fit="true" :data="menuData"></Tree>
        </AccordionPanel>
        <AccordionPanel title="Title2">
          <p>Content2</p>
        </AccordionPanel>
        <AccordionPanel title="Title3">
          <p>Content3</p>
        </AccordionPanel>
      </Accordion>
    </LayoutPanel>

    <LayoutPanel region="center" style="height:100%">
        <router-view></router-view>
    </LayoutPanel>
  </Layout>
</template>

<script>

export default {
  data () {
    return {
      menuData: [
        {
          text: 'Item1',
          children: [
            {text: 'Item11'},
            {
              text: 'Item12',
              state: 'closed',
              children: [
                {text: 'Iteme121'},
                {text: 'Iteme122'},
                {text: 'Iteme123'}
              ]
            },
            {text: 'Item13'},
            {text: 'Item14'}
          ]
        },
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'},
        {text: 'Item2'}
      ]
    }
  }
}
</script>

<style>
  html, body {
    height: 100%;
    overflow: hidden;
    margin: 0;
  }
</style>
